import React from 'react';
import usePagination, { PaginationEntity } from '../hook/usePagination';
import { Table } from 'antd';
import { range } from 'lodash';
import { ColumnsType } from 'antd/lib/table';

((window as unknown) as any).mockFaildRate = 0;

interface DataType {
  index: number;
  value: string;
}

const data: DataType[] = range(1, 1000).map((x, i) => ({
  index: i,
  value: `${i} => ${x}`,
}));
const mockPaginationApi = function query({
  pageIndex,
  pageSize,
}: PaginationEntity<DataType>): Promise<PaginationEntity<DataType>> {
  console.log('query', { pageIndex, pageSize });
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      if (Math.random() < ((window as unknown) as any).mockFaildRate) {
        reject('query failed!');
        return;
      }
      resolve({
        pageIndex,
        pageSize,
        data: data.slice((pageIndex - 1) * pageSize, pageIndex * pageSize),
        total: data.length,
      });
    }, Math.floor(Math.random() * 500) + 100);
  });
};
const Style = { width: 800, margin: 'auto' };
const Columns: ColumnsType<DataType> = [
  {
    title: 'index',
    key: 'index',
    dataIndex: 'index',
    align: 'center',
  },
  {
    title: 'value',
    key: 'value',
    dataIndex: 'value',
    align: 'center',
  },
];
function UsePaginationExample() {
  const { props } = usePagination(mockPaginationApi);
  return (
    <Table
      {...props}
      style={Style}
      tableLayout='auto'
      columns={Columns}
      rowKey='index'
    ></Table>
  );
}

export default UsePaginationExample;
